<script setup lang="ts">
import { Command, Id } from '../model'

defineProps<{
  commands: Command[]
}>()
defineEmits<{
  (e: 'add', id: Id): void
}>()
</script>

<template>
  <div>
    <slot name="header"></slot>
    <ul>
      <li
        v-for="{ name, id, desc } in commands"
        class="item"
        @click="$emit('add', id)"
      >
        <el-tooltip
          :content="desc"
          placement="right"
          v-if="desc"
        >
          <div>{{ name }}</div>
        </el-tooltip>
        <div v-else>{{ name }}</div>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.item {
  cursor: pointer;
  padding: 8px 1em;

  &:hover {
    background-color: #eee;
  }
}
</style>
